<template>
  <div class="app-container">

    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="日期" prop="supplier">
        <el-date-picker v-model="yearValue" type="year" value-format="yyyy" placeholder="选择年">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['system:SupplierChronology:Export']">导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>


    <el-table :data="tableData">
      <el-table-column prop="month" label="月份" :formatter="formatMonth"></el-table-column>
      <template v-for="item in companyList">
        <el-table-column :key="item" :label="item">
          <template v-for="item2 in productGroups ">
            <el-table-column :key="item2" :label="item2">
              <template slot-scope="scope">
                <template v-for="item3 in scope.row.data">
                  <span class="rightText">
                    {{ formatNumber(item3.company == item & item3.product_group == item2 & item3.groupMoney > 0 ?
      item3.groupMoney.toFixed(2) : '') }}
                  </span>
                </template>
              </template>
            </el-table-column>
          </template>

        </el-table-column>
      </template>
      <el-table-column label="合计">
        <template slot-scope="scope">
          <span class="rightText" v-if="scope.row.data.length>0">
            {{formatNumber(parseFloat(calculateTotal(scope.row.data)) .toFixed(2))  }}
          </span>
        </template>
      </el-table-column>
    </el-table>
  </div>

</template>

<script>
import { listCompanyMoney } from "@/api/system/SupplierChronology";
export default {
  name: 'SupplierChronology',
  data() {
    return {
      tableData: [],
      queryParams: {
        company: "",
        time: ''
      },
      showSearch: true,
      // 遮罩层
      loading: true,
      companyList: ['营运公司', '崇明巴士', '金山巴士'],
      productGroups: ['配件', '润滑油', '制冷剂', '轮胎'],
      companyShow: true,
      yearValue: new Date().getFullYear().toString()
    }
  },
  mounted() {
    this.getList();

  },

  methods: {
    // 查询列表
    getList() {
      this.loading = true;
      this.queryParams.time = this.yearValue;
      listCompanyMoney(this.queryParams).then(response => {
        this.tableData = response.data;
        this.loading = false;
      })
    },
    // 合计
    calculateTotal(data) {
    let total = 0;
    data.forEach(item => {
      if (item.groupMoney > 0) {
        total += parseFloat(item.groupMoney);
      }
    });
    return total.toFixed(2);
  },
  // 查询
    handleQuery() {
      this.getList();
    },
    // 重置
    resetQuery() {
      this.yearValue = new Date().getFullYear().toString()
      this.getList();
    },
    //  月份
    formatMonth(row, column, cellValue) {
      // 清除月份前面的0
      return parseInt(cellValue, 10).toString();
    },
    // 数字转换
    formatNumber(value) {
      if (value) {
        let [integerPart, decimalPart] = value.toString().split('.');
        let formattedNumber = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, ',') + '.' + decimalPart.slice(0, 3);
        return formattedNumber;
      }

    },
    // 导入
    handleExport() { },



  }
}
</script>
<style lang="scss" scoped>
::v-deep .el-table thead.is-group th {
  background-color: #f8f8f9;
}

::v-deep .el-table__cell {
  text-align: center;
}

.rightText {
  float: right;
}
</style>
